<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
    	
    </canvas>
		<div id="info">

		</div>
	</body>
	<script type="text/javascript">
		var x = 30;
		var y = 30;
		var canvas = document.getElementById("canvas")

		function drawHead(context) {
			context.beginPath();
		context.moveTo(0, -5*y);
		context.lineTo(-x, -4*y);
		context.lineTo(-x/2,-4*y);
		context.lineTo(-x, -3*y);
		context.lineTo(-x/2, -3*y);
		context.lineTo(-x, -2*y);

		context.lineTo(x,-2*y);
		context.lineTo(x/2, -3*y);
		context.lineTo(x,-3*y);
		context.lineTo(x/2,-4*y);
		context.lineTo(x, -4*y);
		context.closePath();
			
			//树干
			context.lineWidth = 2;
		}

		function drawTree(context) {
			context.save();
		context.transform(1 , 0 , -0.7 , 0.9 , 0 , 0);
		drawHead(context);
		context.fillStyle="rgba(0,0,0,0.1)";
		context.fillRect(-x/2,-2*y,x,2*y);
		context.fill();

		context.restore();

		/*树干*/
		context.fillStyle="#996633";
		context.fillRect(-x/2,-2*y,x,2*y);

		/*树冠*/
		drawHead(context);
		context.lineWidth=4;
		context.lineJoin = "round";
		context.fillStyle="red";
		context.stroke();
		context.fillStyle="green";
		context.fill();
		}
		
		function drawPath(context){
		
		context.beginPath();
		context.moveTo(0,0);
		context.quadraticCurveTo(0,250,500,500);
		context.lineWidth = 50;
		context.strokeStyle = "yellow";
		context.stroke();
		
	}
		
		var img = new Image;
		img.src = "img/company-2.png";

		function drawText(context) {
			context.shadowColor = "rgba(0,0,0,0.5)";
			context.shadowOffsetX = 10;
			context.shadowOffsetY = 10;
			context.shadowBlur = 6;

			var pattern = context.createPattern(img, "repeat");
			context.fillStyle = pattern;
			context.font = "bold 40px 微软雅黑";
			context.fillText("hellow world", 100, 50);
		}

		function draw() {
			var context = canvas.getContext("2d");
			drawPath(context);
			//
			if(context != null) {
				context.save();
				context.translate(30, 200);
				drawTree(context);
				context.translate(200, 150);
				context.scale(2, 2);
				drawTree(context);
				context.translate(-220, -50);
				drawText(context);
				context.restore();

				//

			}
			
		}

		img.addEventListener("load", draw, true);
	</script>

</html>